<template>
  <view :style="themeColor">
    <view class="page">
      <!-- :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', 'background-image':
'url(' + bg_img + ')'}" -->
      <view class="flex benben-position-layout flex flex-wrap align-center apartmentDetails_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
        <view class='flex flex-wrap align-center justify-between flex-sub apartmentDetails_fd0_0'>
          <view class='flex flex-wrap align-center apartmentDetails_fd0_0_c0' @tap.stop="goBack" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  apartmentDetails_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='apartmentDetails_fd0_0_c1_c0'>{{$t('房源详情')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-end apartmentDetails_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd1_0" @change="changebgImage($event)"
            class='flex position-relative apartmentDetails_fd1_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>

            <template v-for='(item,key0) in apartmentDetails.video' v-if="apartmentDetails.video.length>0">
              <swiper-item class='flex  apartmentDetails_fd1_0' :key='key0'>
                <view class="video-bg" v-if="!isPlay" @click.stop="playVideo">
                  <image :src="apartmentDetails.video_img" mode="aspectFill"></image>
                  <image class="plays" src="/static/images/play.png" mode="aspectFill"></image>
                </view>
                <view class="" v-else>
                  <video class='flex  apartmentDetails_fd1_0_c1_c0' id="myVideo" :src="apartmentDetails.video[0].path"
                    @fullscreenchange="fullscreenchange" @ended="videoEnd" x5-video-player-type="h5"
                    :enable-progress-gesture='true'></video>
                </view>
                <!-- <video class='flex  apartmentDetails_fd1_0_c1_c0' :poster="apartmentDetails.thumb"
                  :src="item.benbenForItem" controls='true' x5-video-player-type="h5" :enable-progress-gesture='true'
                  object-fit="fill"></video> -->

              </swiper-item>
            </template>
            <template v-for='(item,key1) in apartmentDetails.images'>
              <swiper-item class='flex' :key='key1' @click="looKImage(apartmentDetails.images,key1)">
                <image class='apartmentDetails_fd1_0_c2_c0' mode="aspectFill" :src='item'></image>
              </swiper-item>
            </template>

          </swiper>
          <view style="position: absolute"
            class="flex dot flex align-center justify-center apartmentDetails_swiperDotfd1_0">
            <view class='flex flex align-center justify-center apartmentDetails_numberfd1_0_c0'>
              <text>{{bannerIndexfd1_0+1}}</text>
              <text>/</text>
              <text>{{(apartmentDetails.video.length+apartmentDetails.images.length)}}</text>
            </view>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1699599639668" :mask="true" :mask-close-able="false" mode='bottom'>
        <!---分享flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout apartmentDetails_flex_2">
          <view class='flex flex-direction flex-wrap align-stretch flex-sub apartmentDetails_fd2_0'>
            <view class='flex flex-wrap align-center justify-between apartmentDetails_fd2_0_c0'>
              <view class='flex flex-wrap align-center apartmentDetails_fd2_0_c0_c0'>
              </view>
              <text class='apartmentDetails_fd2_0_c0_c1'>{{$t('分享至')}}</text>
              <image class='apartmentDetails_fd2_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"54.png"'
                @tap.stop="popupShow1699599639668=false"></image>
            </view>
            <view class='flex flex-wrap align-center justify-between apartmentDetails_fd2_0_c1'>
              <view class='flex flex-direction flex-wrap align-center' @tap.stop="copyText(apartmentDetails.h5_share)">
                <image class='apartmentDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
                <text class='apartmentDetails_fd2_0_c1_c0_c1'>{{$t('复制链接')}}</text>
              </view>
              <!-- #ifdef APP || APP-PLUS -->
              <view class='flex flex-direction flex-wrap align-center' @click.stop="shareApp('1')">
                <image class='apartmentDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
                <text class='apartmentDetails_fd2_0_c1_c0_c1'>{{$t('微信好友')}}</text>
              </view>
              <view class='flex flex-direction flex-wrap align-center' @click.stop="shareApp('2')">
                <image class='apartmentDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"57.png"'></image>
                <text class='apartmentDetails_fd2_0_c1_c0_c1'>{{$t('朋友圈')}}</text>
              </view>
              <!-- #endif -->
              <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/shouye/reportingPage/reportingPage?id=${apartmentDetails.aid}&type=${apartmentDetails.publisher_type}`">
                <image class='apartmentDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"58.png"'></image>
                <text class='apartmentDetails_fd2_0_c1_c0_c1'>{{$t('举报')}}</text>
              </view>
            </view>
          </view>
        </view>

        <!---分享flex布局结束-->

      </benben-popup>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout apartmentDetails_flex_3">
        <view class='flex flex-direction flex-wrap align-stretch apartmentDetails_fd3_0'>
          <view class='flex flex-wrap align-center'>
            <text class='apartmentDetails_fd3_0_c0_c0'>{{apartmentDetails.apartmentbrand_name}}</text>
            <text class='apartmentDetails_fd3_0_c0_c1'>{{apartmentDetails.name}}</text>
          </view>
          <text class='apartmentDetails_fd3_0_c1'>{{apartmentDetails.introduce}}</text>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch apartmentDetails_fd3_1' v-if="housing_list.length>0">
          <text class='apartmentDetails_fd3_1_c0'>{{$t('公寓房型')}}</text>
          <template v-for='(item,key0) in housing_list'>
            <view class='flex flex-wrap align-stretch apartmentDetails_fd3_1_c1' @tap.stop="handleJumpDiy"
              data-type="navigateTo" :data-url="`/pages/shouye/roomDetails/roomDetails?id=${item.aid}`" :key='key0'>
              <view class='flex flex-direction flex-wrap align-start apartmentDetails_fd3_1_c1_c0'>
                <image class='apartmentDetails_fd3_1_c1_c0_c0' mode="aspectFill" :src='item.images[0]'></image>
              </view>
              <view class='flex flex-direction flex-wrap align-start flex-sub'>
                <view class='flex flex-wrap align-center'>
                  <text class='apartmentDetails_fd3_1_c1_c1_c0_c0'>{{item.name}}</text>
                </view>
                <view class='flex flex-wrap align-center apartmentDetails_fd3_1_c1_c1_c1'>
                  <text class='apartmentDetails_fd3_1_c1_c1_c1_c0'
                    v-for="(itemC,indexC) in item.apartmentlabel_label_arr" :key="indexC">{{itemC}}</text>
                </view>
                <view class='flex flex-wrap align-center apartmentDetails_fd3_1_c1_c1_c2'>
                  <text class='apartmentDetails_fd3_1_c1_c1_c2_c0'>{{$t('HK$')}}</text>
                  <text class='apartmentDetails_fd3_1_c1_c1_c2_c1'>{{item.price}}</text>
                  <text class='apartmentDetails_fd3_1_c1_c1_c2_c0'>{{$t('/月')}}</text>
                </view>
              </view>
            </view>
          </template>

        </view>
        <view class='flex flex-direction flex-wrap align-stretch apartmentDetails_fd3_2'>
          <text class='apartmentDetails_fd3_2_c0'>{{$t('房源位置')}}</text>
          <view class='flex flex-wrap align-start apartmentDetails_fd3_2_c1' @click.stop="goMap">
            <text class='apartmentDetails_fd3_2_c1_c0'>{{$t('位置信息：')}}</text>
            <view class='apartmentDetails_fd3_2_c1_c1'>
              <text
                class='apartmentDetails_fd3_2_c1_c0'>{{apartmentDetails.housingmrt_name}}-{{apartmentDetails.housingaddress_name}}</text>
            </view>
          </view>
          <view v-if="apartmentDetails.address" class='flex flex-wrap align-start apartmentDetails_fd3_2_c1'>
            <text class='apartmentDetails_fd3_2_c1_c0'>{{$t('详细地址：')}}</text>
            <view class='apartmentDetails_fd3_2_c1_c1'>
              <text class='apartmentDetails_fd3_2_c1_c0'>{{apartmentDetails.address}}</text>
            </view>
          </view>
          <!-- <view class='flex flex-wrap align-center apartmentDetails_fd3_2_c2'>
            <map id="map" class="map" :show-location="true" v-if="isMap" :markers="markers" :latitude="apartmentDetails.address_lat"
              :longitude="apartmentDetails.address_lng"></map>
            <image class='apartmentDetails_fd3_2_c2_c0' mode="aspectFit" :src='apartmentDetails.map_img'></image>
          </view> -->
        </view>
        <view class='flex flex-direction flex-wrap align-stretch apartmentDetails_fd3_2'>
          <text class='apartmentDetails_fd3_2_c0'>{{$t('房源周边说明')}}</text>
          <view class='flex flex-wrap align-center apartmentDetails_fd3_2_c1'>
            <text class='apartmentDetails_fd3_3_c1_c0'>{{apartmentDetails.peripheral_desc}}</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch apartmentDetails_fd3_2'>
          <text class='apartmentDetails_fd3_2_c0'>{{$t('其他描述')}}</text>
          <view class='flex flex-wrap align-center apartmentDetails_fd3_2_c1'>
            <text class='apartmentDetails_fd3_3_c1_c0'>{{apartmentDetails.other_desc}}</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex apartmentDetails_flex_4">
        <view class='flex flex-wrap align-center flex-sub apartmentDetails_fd4_0'>
          <view class='flex flex-direction flex-wrap align-center apartmentDetails_fd4_0_c0'
            @tap.stop="addcancelFavoriteFunc()">
            <image class='apartmentDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"51.png"'
              v-if=" apartmentDetails.is_collect!='1'"></image>
            <image class='apartmentDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"96.png"'
              v-if=" apartmentDetails.is_collect=='1'"></image>
            <text class='apartmentDetails_fd4_0_c0_c1' v-if=" apartmentDetails.is_collect!='1'">{{$t('收藏')}}</text><text
              class='apartmentDetails_fd4_0_c0_c1' v-if=" apartmentDetails.is_collect=='1'">{{$t('已收藏')}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="popupShow1699599639668=true">
            <image class='apartmentDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
            <text class='apartmentDetails_fd4_0_c0_c1'>{{$t('分享')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-center flex-sub apartmentDetails_fd4_0_c2'
            @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/customerService/customerService?type=${apartmentDetails.publisher_type}&aid=${apartmentDetails.aid}`">
            <image class='apartmentDetails_fd4_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
            <text class='apartmentDetails_fd4_0_c2_c1'>{{$t('立即咨询')}}</text>
          </view>
        </view>

      </view>
      <view :style="{height: '98rpx'}"></view>


    </view>
    <!-- #ifdef H5 -->
    <view class="text-df text-white flex align-center justify-between fixedupload" @click.stop="upLoad">
      <view class="flex align-center">
        <image src="../../../static/logo.png" mode=""></image>
        <view class="">使用 NextRent App 解鎖完整功能 </view>
      </view>
      <view class="text-sm btns">去下載</view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "popupShow1699599639668": false,
        "bannerIndexfd1_0": 0,
        "apartmentList": [],
        "apartmentDetails": {
          "aid": "",
          "name": "",
          "user_nickname": "",
          "publisher_type": "",
          "housingrentalmethod_name": "",
          "housingrentalduration_name": "",
          "start_time": "",
          "monthly_rent": "",
          "housingtype_name": "",
          "housingfloor_louceng": "",
          "housinglift_name": "",
          "housingaddress_name": "",
          "area": "",
          "address": "",
          "housingtenantgender_name": "",
          "video": [],
          "images": [],
          "mobile": "",
          "wechat": "",
          "whatsapp": "",
          "introduce": "",
          "other_desc": "",
          "create_time": "",
          "status": "",
          "refuse_reason": "",
          "housingrentalmethod_id": "",
          "housingrentalduration_id": "",
          "housingtype_id": "",
          "housingfloor_id": "",
          "housinglift_id": "",
          "housingaddress_id": "",
          "address_province": "",
          "address_city": "",
          "address_district": "",
          "address_address": "",
          "address_lat": "",
          "address_lng": "",
          "housingtenantgender_id": "",
          "user_id": "",
          "housingschool_name": "",
          "housingmrt_name": "",
          "housingschool_id": "",
          "housingmrt_id": "",
          "apartmentbuildtype_name": "",
          "is_recommend": "",
          "peripheral_desc": "",
          "apartmentbuildtype_id": "",
          "rental_method": "",
          "apartmentbrand_name": "",
          "apartmentbrand_id": "",
          "housing_list": [],
          "is_collect": ""
        },
        "id": "1",
        videoContext: null,
        isPlay: false,
        markers: [],
        video_img: '',
        bg_img: '',
        isShow: false,
        housing_list: [],
        isMap: false
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        id
      } = options
      if (id !== undefined) this.id = id
      this.getdetailsFunc()
    },
    onUnload() {

    },
    onPageScroll(e) {
      if (e.scrollTop > 50) {
        this.isMap = true
      } else {
        this.isMap = false
      }
    },
    onReady() {
      this.videoContext = uni.createVideoContext('myVideo');
    },
    onShow() {


    },
    onHide() {
      this.popupShow1699599639668 = false
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    methods: {
      upLoad() {
        let platform = uni.getSystemInfoSync().platform
        if (platform == 'ios') {
          window.location.href = "https://apps.apple.com/cn/app/nextrent/id6475764677"
        } else {
          window.location.href = "https://play.google.com/store/apps/details?id=com.xianggangfangyuans.benben&pli=1"
        }
      },
      goBack() {
        // #ifdef APP || APP-PLUS
        uni.navigateBack()
        // #endif
        // #ifdef H5
        window.location.href = 'https://api.nextrenthk.com/h5/#/'
        // #endif
      },
      // 分享APP
      shareApp(type) {
        let that = this
        let provider = ''
        let scene = ''
        if (type == 1) {
          provider = 'weixin'
          scene = 'WXSceneSession'
        } else if (type == 2) {
          provider = 'weixin'
          scene = 'WXSenceTimeline'
        }
        // let links = that.apartmentDetails.h5_share +
        //   `/pages/shouye/apartmentDetails/apartmentDetails?id=${that.apartmentDetails.aid}`
        // console.log(' that.apartmentDetails', links)
        uni.share({
          provider: provider,
          scene: scene,
          imageUrl: '/static/logo.png',
          title: that.apartmentDetails.name,
          href: that.apartmentDetails.h5_share,
          success: function(res) {
            console.log('22222')
            console.log("success:" + JSON.stringify(res));
          },
          fail: function(err) {
            this.$message.info('分享失败')
            console.log("fail:" + JSON.stringify(err));
          }
        });
      },
      changebgImage($event) {
        this.bannerIndexfd1_0 = $event.detail.current

        if (this.apartmentDetails.video_img && this.bannerIndexfd1_0 == 0) {
          this.bg_img = this.apartmentDetails.video_img
        } else {
          this.bg_img = this.apartmentDetails.images[this.bannerIndexfd1_0 - 1]
        }
      },
      // 打开地图
      goMap() {
        let that = this
        let address_lat = parseFloat(this.apartmentDetails.address_lat)
        let address_lng = parseFloat(this.apartmentDetails.address_lng)
        uni.openLocation({
          latitude: address_lat,
          longitude: address_lng,
          name: that.apartmentDetails.address_address,
          success() {
            console.log('success')
          }
        })
      },
      // 开始播放
      playVideo() {
        this.isPlay = true;
        let that = this;
        setTimeout(() => {
          that.videoContext.requestFullScreen(0);
          that.videoContext.play();
        }, 200);
      },
      /**
       * @event
       * @description  视频结束监听
       * */
      videoEnd() {
        let that = this
        that.videoContext.exitFullScreen();
        that.isPlay = false
      },
      /**
       * @event
       * @description  视频全屏监听
       * */
      fullscreenchange(e) {
        let that = this
        // 退出全屏时
        if (!e.detail.fullScreen) {
          that.isPlay = false
          that.videoContext.pause();
        }
      },
      //退出登录
      logOutFunc() {
        this.$store.commit('logout')
        this.$urouter.reLaunch(`/pages/tabBar/loginPage/loginPage`);
      },
      looKImage(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      //获取品牌公寓详情
      async getdetailsFunc() {
        //请求方法
        //数据验证

        let dataapartmentDetails = await this.$api.post(global.apiUrls.post65433684573f4, {
          aid: this.id
        });

        if (dataapartmentDetails.data.code != 1) {
          this.$message.info(dataapartmentDetails.data.msg);
          return
        }
        let infoapartmentDetails = dataapartmentDetails.data;
        this.apartmentDetails = infoapartmentDetails.data
        this.housing_list = this.apartmentDetails.housing_list.map(item => {
          const obj = {
            ...item,
            apartmentlabel_label_arr: item.apartmentlabel_label.split(',')
          }
          return obj
        })
        console.log(this.housing_list)
        if (this.apartmentDetails.video_img) {
          this.bg_img = this.apartmentDetails.video_img
        } else {
          this.bg_img = this.apartmentDetails.images[0]
        }
        this.markers.push({
          id: 1,
          latitude: parseFloat(this.apartmentDetails.address_lat),
          longitude: parseFloat(this.apartmentDetails.address_lng),
          iconPath: '/static/images/location.png',
          width: 30,
          height: 30,
        })
      },
      //添加取消收藏
      async addcancelFavoriteFunc() {
        let data65434b19cc781 = await this.$api.post(global.apiUrls.post65434b19cc781, {
          type: this.apartmentDetails.publisher_type,
          house_id: this.apartmentDetails.aid,
          house_name: this.apartmentDetails.name
        });

        if (data65434b19cc781.data.code != 1) {
          this.$message.info(data65434b19cc781.data.msg);
          return
        }
        this.getdetailsFunc()
        this.$message.info(res.data.msg);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .fixedupload {
    width: 100%;
    position: fixed;
    bottom: 100rpx;
    padding: 32rpx 24rpx;
    left: 0;
    text-align: center;
    background-color: #000;
    z-index: 9;
    border-radius: 44rpx 44rpx 0 0;

    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 16rpx;
      margin-right: 12rpx;
    }

    .btns {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 16rpx;
      text-align: center;
      width: #0181ff;
      background-color: #0181ff;
    }
  }

  .video-bg {
    width: 100%;
    height: 100%;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .plays {
      position: absolute;
      top: 30%;
      left: 45%;
      width: 80rpx;
      height: 80rpx;
      z-index: 2;
    }
  }

  .map {
    flex: 1;
    // width: 750rpx;
    height: 300rpx;
  }

  ::v-deep .amap-logo {
    opacity: 0 !important;
  }

  ::v-deep .amap-copyright {
    opacity: 0 !important;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(248, 248, 248, 1);
    background-size: 100% auto;
  }

  .apartmentDetails_flex_0 {
    // background: url(image-path('80.png')) no-repeat;
    background-color: #FFFFFF;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .apartmentDetails_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 88rpx;
  }

  .apartmentDetails_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333333;
  }

  .apartmentDetails_fd0_0_c0 {
    width: 120rpx;
  }

  .apartmentDetails_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .apartmentDetails_numberfd1_0_c0 {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 52rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .apartmentDetails_fd1_0_c2_c0 {
    width: 750rpx;
    height: 520rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd1_0_c1_c0 {
    width: 750rpx;
    height: 520rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .apartmentDetails_fd1_0 {
    width: 750rpx;
    height: 520rpx;
  }

  .apartmentDetails_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .apartmentDetails_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .apartmentDetails_swiperDotfd1_0 {
    position: absolute;
    bottom: 8rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .apartmentDetails_flex_2 {
    background: rgba(255, 255, 255, 1);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .apartmentDetails_fd2_0_c1_c0_c1 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd2_0_c1_c0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd2_0_c1 {
    margin: 40rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 60rpx 0rpx 60rpx;
  }

  .apartmentDetails_fd2_0_c0_c2 {
    width: 26rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd2_0_c0_c1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 53rpx;
  }

  .apartmentDetails_fd2_0_c0_c0 {
    width: 26rpx;
    height: 26rpx;
  }

  .apartmentDetails_fd2_0_c0 {
    padding: 0rpx 40rpx 0rpx 040rpx;
  }

  .apartmentDetails_fd2_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 42rpx 0rpx 66rpx 0rpx;
  }

  .apartmentDetails_flex_3 {
    padding: 0rpx 24rpx 0rpx 24rpx;
    position: relative;
    margin: -50rpx 0rpx 42rpx 0rpx;
  }

  .apartmentDetails_fd3_3_c1_c0 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .apartmentDetails_fd3_2_c2_c0 {
    width: 654rpx;
    height: 320rpx;
    border-radius: 16rpx;
  }

  .apartmentDetails_fd3_2_c2 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_2_c1_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    width: 487rpx;
  }

  .apartmentDetails_fd3_2_c1_c0 {
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 42rpx;
  }

  .apartmentDetails_fd3_2_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_2_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .apartmentDetails_fd3_2 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto !important;
    padding: 32rpx 24rpx 32rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c2_c1 {
    color: #F7582F;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 36rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c2_c0 {
    color: #F7582F;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c2 {
    margin: auto 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c1_c0 {
    background: rgba(243, 245, 250, 1);
    color: rgba(106, 124, 143, 1);
    font-size: 22rpx;
    font-weight: 400;
    line-height: 32rpx;
    padding: 0rpx 7rpx 0rpx 7rpx;
    background-size: 100% auto !important;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c1 {
    margin: 17rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c1_c1_c0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .apartmentDetails_fd3_1_c1_c0_c0 {
    width: 226rpx;
    height: 226rpx;
    border-radius: 16rpx;
  }

  .apartmentDetails_fd3_1_c1_c0 {
    position: relative;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c1 {
    margin: 0rpx 0rpx 32rpx 0rpx;
  }

  .apartmentDetails_fd3_1_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .apartmentDetails_fd3_1 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto;
    margin: 0rpx 0rpx 24rpx 0rpx;
    padding: 32rpx 29rpx 0rpx 29rpx;
  }

  .apartmentDetails_fd3_0_c1 {
    margin: 20rpx 0rpx 0rpx 0rpx;
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .apartmentDetails_fd3_0_c0_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
  }

  .apartmentDetails_fd3_0_c0_c0 {
    background: linear-gradient(134deg, #FF9402 0%, #FFCE00 100%);
    padding: 6rpx 4rpx 6rpx 4rpx;
    background-size: 100% auto;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 24rpx;
    border-radius: 4rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 0rpx 9rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd3_0 {
    background: rgba(255, 255, 255, 1);
    margin: 0rpx 0rpx 24rpx 0rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 32rpx 24rpx 32rpx 24rpx;
  }

  .apartmentDetails_flex_4 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 98rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.05);
  }

  .apartmentDetails_fd4_0_c2_c1 {
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .apartmentDetails_fd4_0_c2_c0 {
    width: 44rpx;
    height: 44rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd4_0_c2 {
    background: rgba(1, 129, 255, 1);
    margin: 0rpx 0rpx 0rpx 40rpx;
    background-size: 100% auto;
    border-radius: 40rpx;
    height: 80rpx;
  }

  .apartmentDetails_fd4_0_c0_c1 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 3rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd4_0_c0_c0 {
    width: 44rpx;
    height: 44rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd4_0_c0 {
    margin: 0rpx 44rpx 0rpx 0rpx;
  }

  .apartmentDetails_fd4_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 0rpx 50rpx 0rpx 50rpx;
  }
</style>